<template>
	<view class="content3" :style="{ background: `url(${beijing}) left top/100% 100% no-repeat` }">
		<view>
			<!-- 轮播图 -->
			<view class="banner">
				<view class="uview-banner">
					<view class="postion">
						<u-navbar title="入场码" :bgColor="navBgColor" :titleStyle="{ color: navColor }" fixed>
							<view slot="left"></view>
						</u-navbar>
					</view>
				</view>
			</view>
			<view class="container">
				<image class="postion_img" :src="icon0" mode=""></image>

				<view class="content2" :style="{ background: `url(${beijingq}) left top/100% 100% no-repeat` }">
					<view class="d-flex align-center flex-column" :hidden="!vueShowModel" style="height: 28vh;">
						<view class="tip">出示二维码入场</view>
						<!-- <view class="tip" v-if="goods_type == 3">
							<text class="qrcode_zidong1">开场前</text>
								<text class="qrcode_zidong2">{{permit_in_time}}</text>
								<text class="qrcode_zidong1">分钟允许进场；</text>
								<text class="qrcode_zidong1">结束后</text>
								<text class="qrcode_zidong2">{{permit_in_time}}</text>
								<text class="qrcode_zidong1">分钟离场，请勿超时!</text></view> -->
						<!-- <view class="qrcode_shuax"   v-if="goods_type == 3">
							<view class="qrcode_zidong">
								<text class="qrcode_zidong1">开场前</text>
								<text class="qrcode_zidong2">{{permit_in_time}}</text>
								<text class="qrcode_zidong1">分钟允许进场；</text>
								<text class="qrcode_zidong1">结束后</text>
								<text class="qrcode_zidong2">{{permit_in_time}}</text>
								<text class="qrcode_zidong1">分钟离场，请勿超时!</text>
							</view>
						</view> -->
						<view class="" v-if="oncode == true">
							<view class="" style="padding: 10rpx 20rpx 10rpx 20rpx;border-radius: 5rpx;"
								v-if="codequery != ''">
								<uQRCode ref="qrcode" canvas-id="qrcode" :value="codequery" size="160"></uQRCode>
							</view>
							<view class=""
								style="padding: 10rpx 20rpx 10rpx 20rpx;border-radius: 5rpx;text-align: center;" v-else>
								<view class=""
									style="width: 320rpx;height: 320rpx;text-align: center;line-height: 320rpx;color: #999999;">
									<image style="width: 320rpx;height: 320rpx;" :src="icon1" mode=""></image>
								</view>
							</view>
						</view>
						<view class="" v-if="oncode == false">
							<view class=""
								style="padding: 10rpx 20rpx 10rpx 20rpx;border-radius: 5rpx;text-align: center;">
								<view class=""
									style="width: 320rpx;height: 320rpx;text-align: center;line-height: 320rpx;color: #999999;">
									<image style="width: 320rpx;height: 320rpx;" :src="icon1" mode=""></image>
								</view>
							</view>
						</view>
						<view class="qrcode_shuax">
							<image :src="shuax" mode="" class="qrcode_shuax_img"></image>
							<view class="qrcode_zidong">
								<text class="qrcode_zidong1">运动码60s自动</text>
								<text class="qrcode_zidong2">刷新</text>
							</view>
						</view>
						<view class="qrcode_shuax" v-if="goods_type == 3">
							<view class="qrcode_zidong">
								<text class="qrcode_zidong1">开场前</text>
								<text class="qrcode_zidong2">{{permit_in_time}}</text>
								<text class="qrcode_zidong1">分钟允许进场；</text>
								<text class="qrcode_zidong1">结束后</text>
								<text class="qrcode_zidong2">{{permit_in_time}}</text>
								<text class="qrcode_zidong1">分钟离场，请勿超时!</text>
							</view>
						</view>
						<!-- <view class="qrcode_shuax">
							<view class="qrcode_zidong">
								<text class="qrcode_zidong1" v-if="tips">{{tips}}</text>
							</view>
						</view> -->
					</view>
					<view class="">
						<view class="tabs_1 flex-col">

							<u-tabs :list="tabsList" lineColor="#4BA677" :activeStyle="{
								  color: '#4BA677 ',fontWeight: 'bold',}" :inactiveStyle="{ color: '#666666',}"
								itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :lineWidth="30"
								:current="currentTab" @click="onClickTab" />
						</view>
						<view class="busin">
							<view class="busin-title">
								<image :src="jiaopai" mode="" style="width: 170rpx;height: 49rpx;"></image>
							</view>
						</view>
						<scroll-view class="ticket_list" scroll-y="true" v-if="data.length">
							<view class="ticket_con" v-for="(item,index) in data" @click="quanyiclick(item,index)"
								:class="dateActives === index ? 'active' : 'ticket_con'" v-if="currentTab == 0"
								:style="{ background: `url(${beijinga}) left top/100% 100% no-repeat` }">
								<view class="ticket_con_img">
									<image class="ticket_con_image" :src="icon2" mode=""></image>
								</view>
								<!-- 1票 2卡 3场地 4培训 8赛事 -->
								<view class="ticket_con_conter" v-if="item.goods_type == 1">
									<!-- <view class="ticket_con_conter1">{{item.ticket_name}}</view> -->
									<view class=""
										style="display: flex; justify-content: space-between; flex-direction: row;">
										<view class="ticket_con_conter1">{{item.ticket_name}}</view>
										<view class="ticket_con_erwe">
											<image class="ticket_con_erweimg" :src="icon3" mode=""></image>
										</view>
									</view>
									<view class="ticket_con_conter2">场馆：{{item.venue_name}}</view>
									<view class="ticket_con_conter3" v-if="item.yxq != '长期有效'">有效期{{item.days}}天</view>
									<view class="ticket_con_conter3" v-else></view>
									<view class="ticket_con_conter4" v-if="item.inventory === 0">有效期：{{ item.sku_info }}
									</view>
									<view class="ticket_con_conter4" v-if="item.inventory === 1">{{ item.yxq }}</view>
								</view>
								<view class="ticket_con_conter" v-if="item.goods_type == 3">
									<view class=""
										style="display: flex; justify-content: space-between; flex-direction: row;">
										<view class="ticket_con_conter1">{{item.court_name}}</view>
										<view class="ticket_con_erwe">
											<image class="ticket_con_erweimg" :src="icon3" mode=""></image>
										</view>
									</view>
									<!-- <view class="ticket_con_conter2">场地号:<text style="color: red;"></text> 场馆:{{item.venue_name}}</view> -->
									<view class="ticket_con_conter3">使用时段:{{ item.time_str }}
									</view>
									<view class="ticket_con_conter4">场地号:{{item.seat_number}}</view>
								</view>
								<view class="ticket_con_conter" v-if="item.goods_type == 4">
									<!-- <view class="ticket_con_conter1">{{item.name}}</view> -->
									<view class=""
										style="display: flex; justify-content: space-between; flex-direction: row;">
										<view class="ticket_con_conter1">{{item.name}}</view>
										<view class="ticket_con_erwe">
											<image class="ticket_con_erweimg" :src="icon3" mode=""></image>
										</view>
									</view>
									<view class="ticket_con_conter2">场馆：{{item.venue_name}}</view>
									<!-- <view class="ticket_con_conter3">使用时段：</view> -->
									<!-- <view class="ticket_con_conter4">有效次数：0次</view> -->
								</view>
								<view class="ticket_con_conter" v-if="item.goods_type == 8">
									<!-- <view class="ticket_con_conter1">{{item.race_name}}</view> -->
									<view class=""
										style="display: flex; justify-content: space-between; flex-direction: row;">
										<view class="ticket_con_conter1">{{item.race_name}}</view>
										<view class="ticket_con_erwe">
											<image class="ticket_con_erweimg" :src="icon3" mode=""></image>
										</view>
									</view>
									<view class="ticket_con_conter2">场馆：{{item.venue_name}}</view>
									<view class="ticket_con_conter3">使用时段：{{item.start_time}} - {{item.end_time}}</view>
									<!-- <view class="ticket_con_conter4">有效次数：0次</view> -->
								</view>
								<!-- <view class="ticket_con_erwe">
									<image class="ticket_con_erweimg"
										:src="icon3"
										mode=""></image>
								</view> -->
							</view>
							<view class="ticket_con" v-for="(item,index) in data" @click="quanyiclick(item,index)"
								:class="dateActives === index ? 'active' : 'ticket_con'" v-if="currentTab == 1"
								:style="{ background: `url(${beijinga}) left top/100% 100% no-repeat` }">
								<view class="ticket_con_img">
									<image class="ticket_con_image" :src="icon4" mode=""></image>
								</view>
								<!-- 1票 2卡 3场地 4培训 8赛事 -->
								<view class="ticket_con_conter">
									<!-- <view class="ticket_con_conter1">{{item.goods_name}}</view> -->
									<view class=""
										style="display: flex; justify-content: space-between; flex-direction: row;">
										<view class="ticket_con_conter1">{{item.goods_name}}</view>
										<view class="ticket_con_erwe">
											<image class="ticket_con_erweimg" :src="icon5" mode=""></image>
										</view>
									</view>
									<view class="ticket_con_conter2">场馆：{{item.venue_name}}</view>
									<view class="ticket_con_conter3" v-if="item.cardstate == 1">暂未开卡</view>
									<view class="ticket_con_conter3" v-else>使用时段：{{ item.yxq }}</view>
									<view class="ticket_con_conter4">有效期：{{ item.else_text }}</view>
								</view>
								<!-- <view class="ticket_con_erwe">
									<image class="ticket_con_erweimg"
										:src="icon5"
										mode=""></image>
								</view> -->
							</view>
						</scroll-view>
						<u-empty v-else mode="order" :icon="icon6" text="暂无入场码" />
					</view>
				</view>
			</view>
		</view>
		<u-popup border-radius="14" mode='center' :mask-close-able="false" :closeable="false" :show="showPopup">
			<view class="not-logged-in">
				<view class="title">授权小程序</view>
				<u-image width="113" height="90" :src="logosrc" v-if="logosrc != ''"></u-image>
				<u-image width="113" height="90" :src="icon7" v-else></u-image>
				<view class="desc">需要手机号授权登录</view>
				<view class="btns">
					<button class="btn2" @click="cancelogin">取消授权</button>
					<button class="btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">立即授权</button>
				</view>
			</view>
		</u-popup>

		<view v-if="Write_off"
			style="width: 100%; height: 100%;background-color:rgba(0, 0, 0, 0.6);  position: absolute;top:0;left:0;z-index: 997;">
		</view>
		<view v-if="Write_off" style="width: 76%; height: 740rpx;background-image: url('https://oss.szsportscenter.cn/upload/59/2ad663afb0de8b4acf48c4ee7ebe54.png?attname=160436.png');
			background-size: 100% 100%;position: absolute;top:350rpx;left:12%;z-index: 999;">
			<scroll-view scroll-y
				style="width: 100%;height: 400rpx;padding: 35rpx 45rpx 35rpx 45rpx;margin-top: 220rpx;">
				<u-parse :content="user_instruction"></u-parse>
				<view class="" style="line-height: 50rpx;color: #ffaa00;font-weight: 600;font-size: 30rpx;">
					尊敬的会员用户
				</view>
				<view class="" style="line-height: 60rpx;margin-top: 10rpx;font-size: 30rpx;">
					{{dialog_text}}
				</view>
			</scroll-view>
			<view class="" style="display: flex;justify-content: center;align-items: center;">
				<view @click="offWrite" style="width: 180rpx; height: 60rpx;background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%, #4BA677 0%);border-radius: 30rpx;
						background-size: 100% 100%;text-align: center;line-height: 60rpx;color: #fff;">
					确定
				</view>
			</view>
			<view style="position: absolute;top: -38px;right: -6%;z-index: 10000000000;" >
				<u-icon @click="offWrite" name="close-circle-fill" color="#ffffff" size="26"></u-icon>
			</view>
		</view>
		<!-- 底部导航组件 -->
		<tabber :active="2"></tabber>
	</view>
</template>

<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	const index = require("@/api/index/index.js");
	const personal = require('@/api/personal/index.js');
	const person = require("@/api/personal/index.js");
	import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue'
	export default {
		components: {
			QSNavbar,
			uQRCode
		},
		data() {
			return {
				icon7: this.$https.assetsPath + 'db34b1cd242d406763397f09ca0aa8e2371b81d4.png',
				icon0: this.$https.assetsPath + '31ec9f2407b2a02454176c89de499e7265014a82.png',
				icon1: this.$https.assetsPath + '4faa1539ceb6fa26402959967e23bf3803e723ff.png',
				icon2: this.$https.assetsPath + '90467859caee4daf1f6682bcf7dc7902a3a36b2c.png',
				icon3: this.$https.assetsPath + 'a979228c7e79cba1d89eedd34e055c5418e7207b.png',
				icon4: this.$https.assetsPath + '90467859caee4daf1f6682bcf7dc7902a3a36b2c.png',
				icon5: this.$https.assetsPath + 'a979228c7e79cba1d89eedd34e055c5418e7207b.png',
				icon6: this.$https.assetsPath + '58d1bf2665b8c20e302f02c56274f0ce972df8b4.png',
				navBgColor: 'rgba(255, 255, 255, 0)',
				navColor: '#FFFFFF',
				beijing: this.$https.assetsPath + "46c49a65f5d77b6c56d4355a7335983511a883d1.png",
				beijingq: this.$https.assetsPath + "eb5c65c1acd609761bd5d745e421d058e0b0ecd7.png",
				beijinga: this.$https.assetsPath + "940f46fda40bccb5e12978d972b45b93e4c8d3c2.png",
				shuax: this.$https.assetsPath + "7fb1b6b153dc9b9d721691a28a354e50b6d753d2.png",
				jiaopai: this.$https.assetsPath + "d36f6ab404e963a339ad5a5ec120f9687c2a595b.png",
				navbarItems_1: [{
					layout: "left",
					type: "text",
					text: "入场码",
					width: 50,
					weight: "bold",
					color: "#fff",
				}, ],
				vueShowModel: true, //默认不显示
				code: '',
				tabsList: [{
						name: "凭证"
					},
					{
						name: "卡包"
					}
				],
				currentTab: 0,
				list1: [],
				data: [],
				options: {},
				code: '',
				timer: null,
				codequery: '',
				not_in_time: '',
				vueShowModel: true, //默认不显示
				chosen_id: '',
				is_over: '',
				listQuery: { //分页
					pageNo: 1,
					pageSize: 9999,
				},
				totalPage: '', //几页
				dateActives: 0,
				goodstype: '',
				buy_id: '',
				id: '',
				lap: 0,
				permit_in_time: '',
				goods_type: '',
				showPopup: false,
				logosrc: uni.getStorageSync("heading"),
				loginCode: "",
				tips: '',
				socketOpen: false, // 是否已经连接
				socketMsgQueue: [], // 消息队列
				oncode: true,
				Write_off: false,
				dialog_text: ''
			};
		},
		onLoad(options) {
			let that = this
			uni.login({
				success(res) {
					that.loginCode = res.code
				}
			})
			this.timer = null;
			this.getBuyNoCard()
			// 获取页面设置配置
			let params = {
				app_id: this.$https.weixinAppId,
			}
			personal.getProjectIdByAppId(params).then(result => {
				getApp().globalData.projectId = result.data.result
				getApp().globalData.sign = result.data.sign;
				// 查询对应小程序的配置信息
				that.getAppletConfig();
			})
			// 创建 WebSocket 连接
			// this.initWebSocket();
		},

		onShow() {
			// if (!uni.getStorageSync("openid")) {
			// 	uni.showToast({
			// 		title: '请先登录！',
			// 		icon: 'none',
			// 		duration: 1000
			// 	});
			// 	setTimeout(() => {
			// 		uni.navigateTo({
			// 			url: "/pages/personal/personal"
			// 		})
			// 	}, 1800)
			// } else {
			// 	let phone = uni.getStorageSync('phone')
			// 	if (!phone) {
			// 		this.showPopup = true
			// 	} else {
			// 		this.showPopup = false
			// 	}
			// }
			let phone = uni.getStorageSync('phone')
			if (!phone) {
				this.showPopup = true
			} else {
				this.showPopup = false
			}
			let that = this;
			that.timer = null;
			clearInterval(that.timer);
			that.timer = setInterval(() => {
				if (that.lap == 0) {
					if (that.currentTab == 0) {
						that.getDynamiclist()
					} else {
						that.getDynamicCodes()
					}
				} else {
					if (that.currentTab == 0) {
						that.getDynamics_list()
					} else {
						that.getDynamic_Code()
					}
				}
			}, 60000);
		},
		onUnload() {
			let that = this;
			clearInterval(that.timer);
			that.timer = null;
		},
		onHide() {
			let that = this;
			clearInterval(that.timer);
			that.timer = null;
		},

		methods: {
			offxieyi(){
				
			},
			// 获取核销领券弹窗
			async getParamsConfig() {
				let that = this;
				let postData = {}
				let res = await index.getParamsConfig(postData)
				if (res.code == 1) {
					if (res.data.show_dialog == 1) {
						that.Write_off = true
						that.oncode = false
						if (that.goods_type != 4) { //goodstyp判断是否为培训
							that.dialog_text = res.data.dialog_text
						} else {
							that.dialog_text = res.data.dialog_text_train
						}
					}
				}
			},
			//关闭弹窗
			offWrite() {
				this.Write_off = false
				this.oncode = true
			},
			onGetPhoneNumber(e) {
				var _this = this
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none', //如果要纯文本，不要icon，将值设为'none'
						duration: 2000 //持续时间为 2秒
					})
				} else {
					// 获取手机号并解密
					uni.checkSession({
						success() {
							// session未过期,并且在本生命周期一直有效 (这里可以不写代码)
						},
						fail() {
							// session_key已失效,需要重新登录流程并更新code
							uni.login({
								success(res) {
									_this.loginCode = res.code
								}
							})
						},
						complete() {
							// 将code,iv,encryptedData传给后端进行解密
							let params = {
								appid: _this.$https.weixinAppId,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv,
								code: _this.loginCode,
								project_id: getApp().globalData.projectId,
								references: uni.getStorageSync("openidlist"),
								invite_code: uni.getStorageSync("codescene") //二维码用户openid
							}
							_this.appletPhoneLogin(params)
						}
					})
				}
			},
			cancelogin() {
				this.showPopup = false
			},
			async appletPhoneLogin(params) {
				let that = this
				let data = params
				let result = await person.appletPhoneLogin(data)
				if (result.code == 1) {
					uni.setStorageSync('phone', result.data.phone)
					uni.setStorageSync('openid', result.data.openid)
					that.showPopup = false
					that.getBuyNoCard()
				} else {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '授权失败，请稍后再试'
					})
				}
			},
			// 点击切换
			quanyiclick(item, index) {
				let that = this
				that.goods_type = item.goods_type
				that.dateActives = index
				that.lap = 1
				if (that.currentTab == 0) {
					if (item.goods_type == 3) {
						that.permit_in_time = item.permit_in_time
					}
					that.goodstype = item.goods_type
					that.buy_id = item.buy_id
					that.getDynamics_list()
				} else {
					that.id = item.id
					that.getDynamic_Code()
				}
			},
			onClickTab({
				index
			}) {
				this.lap = 0
				let that = this
				this.data = []
				this.currentTab = index;
				if (index == 0) {
					that.getBuyNoCard()
				} else {
					that.getList()
				}
			},
			// 获取我的凭证详情
			async getBuyNoCard() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.data = [];
				let postData = {
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync("openid"),
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
				}
				let res = await index.getBuyNoCard(postData)
				if (res.code == 1) {
					if (res.data.data != '') {
						that.data = that.data.concat(res.data.data); //将数据拼接在一起
						that.totalPage = res.data.total_pages
						that.getDynamiclist()
						that.getDyConfig()
					} else {
						that.codequery = ''
					}
				}
			},
			//进来默认以及刷新 获取我的凭证动态码
			async getDynamiclist() {
				let that = this
				let params = {
					goods_type: this.data[0].goods_type,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					goods_id: this.data[0].buy_id
				}
				let res = await person.getDynamicCode(params)
				if (res.code == 1) {
					that.codequery = res.data.result.code
					that.goods_type = that.data[0].goods_type
					if (that.data[0].goods_type == 3) {
						that.permit_in_time = that.data[0].permit_in_time
					}
				}
			},
			//切换 获取我的凭证动态码
			async getDynamics_list() {
				let params = {
					goods_type: this.goodstype,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					goods_id: this.buy_id
				}
				let res = await person.getDynamicCode(params)
				if (res.code == 1) {
					this.codequery = res.data.result.code
					this.goods_type = this.data[0].goods_type
				}
			},
			// 获取我的凭证动态码 // 获取核销领券弹窗
			async getDyConfig() {
				let that = this
				let params = {
					goods_type: this.data[0].goods_type,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					goods_id: this.data[0].buy_id
				}
				let res = await person.getDynamicCode(params)
				if (res.code == 1) {
					that.codequery = res.data.result.code
					if (res.data.result.code != '') {
						that.goods_type = that.data[0].goods_type
						// 获取核销领券弹窗
						that.getParamsConfig()
					}
				}
			},

			// 卡数据
			async getList() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.data = [];
				let params = {
					project_id: getApp().globalData.projectId,
					user_id: uni.getStorageSync('phone'),
					open_id: uni.getStorageSync("openid"),
					appid: this.$https.weixinAppId,
					expired: 0,
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
				}
				let res = await personal.getMyCard(params)
				if (res.code == 1) {
					if (res.data.cardData != '') {
						that.data = that.data.concat(res.data.cardData); //将数据拼接在一起
						that.totalPage = res.data.total_pages
						that.getDynamicCodes()
						that.getDynConfig()
					} else {
						that.codequery = ''
					}
				}
			},
			//进来默认以及刷新 卡动态数据
			async getDynamicCodes() {
				let params = {
					goods_type: '2',
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					goods_id: this.data[0].id
				}
				let res = await person.getDynamicCode(params)
				if (res.code == 1) {
					this.codequery = res.data.result.code
				}
			},
			// 卡动态数据// 获取核销领券弹窗
			async getDynConfig() {
				let that = this
				let params = {
					goods_type: '2',
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					goods_id: this.data[0].id
				}
				let res = await person.getDynamicCode(params)
				if (res.code == 1) {
					that.codequery = res.data.result.code
					if (res.data.result.code != '') {
						that.goods_type = that.data[0].goods_type
						// 获取核销领券弹窗
						that.getParamsConfig()
					}
				}
			},
			//切换 卡动态数据
			async getDynamic_Code() {
				let params = {
					goods_type: '2',
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					goods_id: this.id
				}
				let res = await person.getDynamicCode(params)
				if (res.code == 1) {
					this.codequery = res.data.result.code
				}
			},

			async getAppletConfig() {
				let that = this;
				let data = {
					weixinAppId: this.$https.weixinAppId,
					projectId: getApp().globalData.projectId,
				};
				let result = await index.index(data);
				if (result.code == 1) {
					this.tips = result.data.tips
				}
			},

			initWebSocket() {
				// 创建 WebSocket 连接
				uni.connectSocket({
					url: 'wss://192.168.3.40:26', // 替换为你的 WebSocket 服务器地址
					success: () => {
						console.log('WebSocket 连接已成功建立');
					},
					fail: (err) => {
						console.error('WebSocket 连接失败', err);
					}
				});

				// 监听 WebSocket 连接成功
				uni.onSocketOpen(() => {
					this.socketOpen = true;
					console.log('WebSocket 已连接');

					// 可以在连接成功后发送初始消息
					this.sendMessage('Hello Server');
				});

				// 监听消息
				uni.onSocketMessage((res) => {
					console.log('收到服务器消息：', res.data);
					// 处理接收到的消息
					this.handleMessage(res.data);
				});

				// 监听 WebSocket 错误
				uni.onSocketError((err) => {
					console.error('WebSocket 错误：', err);
				});

				// 监听 WebSocket 关闭
				uni.onSocketClose(() => {
					this.socketOpen = false;
					console.log('WebSocket 已关闭');
				});
			},

			// 发送消息到 WebSocket 服务器
			sendMessage(message) {
				if (this.socketOpen) {
					uni.sendSocketMessage({
						data: message
					});
				} else {
					this.socketMsgQueue.push(message); // 如果未连接，缓存消息
				}
			},

			// 处理接收到的消息
			handleMessage(message) {
				// 处理消息内容
				console.log('处理消息：', message);
			}
		},
	};
</script>

<style lang="scss" scoped>
	@import url("@/static/css/index/index.css");

	.not-logged-in {
		width: 619rpx;
		height: 508rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999999;
		border-radius: 10rpx;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #000000;
			text-align: center;
			padding-top: 43rpx;
		}

		.close {
			color: #AAAAAAFF;
			font-size: 40rpx;
			font-weight: bold;
			position: absolute;
			right: 30rpx;
			top: 20rpx;
		}

		/deep/ .u-image {
			margin: auto;
			margin-top: 52rpx;
		}

		.desc {
			font-size: 30rpx;
			color: #000000;
			font-weight: bold;
			text-align: center;
			margin-top: 20rpx;
		}

		.desc2 {
			color: #ADADADFF;
			font-size: 26rpx;
			text-align: center;
			margin-top: 18rpx;
		}

		.btns {
			display: flex;

			.btn {
				width: 50%;
				height: 100rpx;
				position: absolute;
				bottom: 0;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34rpx;
				color: #4BA677;
				border-top: 1px solid #E6E6E6FF;
			}

			.btn2 {
				width: 50%;
				height: 100rpx;
				position: absolute;
				bottom: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34rpx;
				color: #000;
				border-top: 1px solid #E6E6E6FF;
			}
		}
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10vh;
		flex-direction: column;

		.postion_img {
			display: flex;
			justify-content: center;
			width: 80%;
			height: 96rpx;
		}

		.content2 {
			display: flex;
			flex-direction: column;
			background-size: 100% 100%;
			width: 86vw;
			height: 68vh;

			.tabs_1 {
				width: 86vw;
				height: 90rpx;
				margin-top: 80rpx;
				padding: 0 120rpx;

				/deep/.u-tabs {
					// background-color: #fff;

					.u-tabs__wrapper__nav__item {
						flex: 1;
					}

					.u-tabs__wrapper__nav__line {
						bottom: 0;
					}
				}
			}

			.ticket_list {
				width: 100vw;
				height: 355rpx;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;

				.active {
					background-size: 100% 100%;
					width: 570rpx;
					height: 180rpx;
					display: flex;
					flex-direction: row;
					margin-left: 5vw;
					margin-top: 20rpx;
					position: relative;
					border: #999999 1px dashed;

					.ticket_con_img {
						margin-left: 20rpx;
						margin-top: 20rpx;

						.ticket_con_image {
							width: 60rpx;
							height: 60rpx;
						}
					}

					.ticket_con_conter {
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						margin-left: 20rpx;
						margin-top: 20rpx;

						.ticket_con_conter1 {
							font-size: 30rpx;
							color: #333333;
							font-weight: 700;
						}

						.ticket_con_conter2 {
							font-size: 26rpx;
							color: #333333;
						}

						.ticket_con_conter3 {
							font-size: 26rpx;
							color: #333333;
						}

						.ticket_con_conter4 {
							font-size: 25rpx;
							color: #333333;
						}
					}

					.ticket_con_erwe {
						display: flex;
						justify-content: flex-end;
						position: absolute;
						right: 3vw;
						top: 3vw;

						.ticket_con_erweimg {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}

				.ticket_con {
					background-size: 100% 100%;
					width: 570rpx;
					// height: 180rpx;
					height: auto;
					display: flex;
					flex-direction: row;
					margin-left: 5vw;
					margin-top: 20rpx;
					position: relative;
					padding-bottom: 10rpx;

					.ticket_con_img {
						margin-left: 20rpx;
						margin-top: 20rpx;

						.ticket_con_image {
							width: 60rpx;
							height: 60rpx;
						}
					}

					.ticket_con_conter {
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						margin-left: 20rpx;
						margin-top: 20rpx;
						// width: 380rpx;

						.ticket_con_conter1 {
							font-size: 30rpx;
							color: #333333;
							font-weight: 700;
							width: 380rpx;
						}

						.ticket_con_conter2 {
							font-size: 26rpx;
							color: #333333;
						}

						.ticket_con_conter3 {
							font-size: 26rpx;
							color: #333333;
						}

						.ticket_con_conter4 {
							font-size: 26rpx;
							color: #333333;
						}
					}

					.ticket_con_erwe {
						display: flex;
						justify-content: flex-end;
						position: absolute;
						right: 3vw;
						top: 3vw;

						.ticket_con_erweimg {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}

			.busin {
				display: flex;
				align-items: center;
				margin-left: 26rpx;

				.busin-title {
					color: rgb(51, 51, 51);
					font-size: 32rpx;
					font-weight: 700;
					line-height: 31rpx;
					white-space: nowrap;
				}
			}

			.qrcode_shuax {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-top: 10rpx;

				.qrcode_shuax_img {
					width: 24rpx;
					height: 24rpx;
				}

				.qrcode_zidong {
					font-size: 22rpx;

					.qrcode_zidong1 {
						color: #666666;
						margin-left: 8rpx;
					}

					.qrcode_zidong2 {
						color: #4BA677;
					}
				}
			}

			.qrcode_zidong {
				font-size: 22rpx;

				.qrcode_zidong1 {
					color: #666666;
					margin-left: 8rpx;
				}

				.qrcode_zidong2 {
					color: #4BA677;
				}
			}

			.destroy-code {
				color: #4BA677;
				// margin: 40rpx 0;
				// margin: 30rpx 0 20rpx 0;
			}

			.tip {
				margin: 10rpx 0 0rpx 0;
				color: #666666;
				font-size: 24rpx;
			}

			.tips {
				margin-top: 20rpx;
				color: #999;
				font-size: 28rpx;
			}
		}

		.agent-box {
			width: 630rpx;
			// border-radius: 30rpx;
			// background-color: #fff;
		}

		.agent-content {
			height: 350rpx;
			box-sizing: border-box;
		}
	}
</style>